<template>
  <view class="box">
    <view class="box1">
      <view class="boox">
        <image src="/static/地址.png"></image>
        <view class="address">
          <input @click="show = true" v-model="city" type="text" placeholder="地区（必填）" disabled class="text" />
          <u-picker mode="region" v-model="show" @confirm="getCity"></u-picker>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="cont">
        <view class="search">
          <u-search :placeholder="keyword" :show-action="false" :animation="false" shape="round"></u-search>
          <button class="btn">搜索</button>
        </view>
        <view class="swiper">
          <view class="wrap">
            <u-swiper :list="list"></u-swiper>
          </view>
        </view>
      </view>
      <view class="cont2">
        <view class="cont2-box">
          <view class="cont2-box2">
            <!-- grid -->
            <view class="grid">
              <u-grid :col="5" :border='false'>
                <u-grid-item v-for="(item,index) in grid" :key="index">
                  <img :src="item.image" alt="" />
                  <view class="grid-text">{{item.text}}</view>
                </u-grid-item>
              </u-grid>
            </view>
            <!-- 今日秒杀 -->
            <view class="spikes">
              <view class="l-title">
                <view class="l-text">
                  今日<text>秒杀</text>
                  <u-count-down :timestamp="86400" :show-border="true" font-size="23" color="#fff"
                    border-color="#f4bb50" bg-color="#f1ac4a" separator-color="#f4b551"></u-count-down>
                </view>
                <view class="l-text2">限时折扣抢到就是赚到</view>
                <img src="/static/fish.png" alt="" />
                <img src="/static/crab.png" alt="" />
              </view>
              <view class="r-title">
                <view class="r-box">
                  <view class="r-text">
                    热销排行榜
                  </view>
                  <view class="r-text3">
                    更多 <text>&gt;</text>
                  </view>
                </view>
                <view class="r-text2">
                  大家都在买
                </view>
                <img src="/static/pitaya.png" alt="" />
                <img src="/static/pineapple.png" alt="" />
              </view>
            </view>
            <!-- 推荐 -->
            <view class="recommend">
              <view class="title">
                推荐·精选好物
              </view>
              <view class="jshw">
                <view class="jshw-box" v-for="(item,index) in hawu" :key="index">
                  <contboxVue :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2"
                    :title3="item.title3" :title4="item.title4" :title6="item.title6" :title7="item.title7"
                    :title5="item.title5" :title9="item.title9" :title8="item.title8">
                  </contboxVue>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import contboxVue from '../../compoents/contbox/contbox.vue';
  export default {
    components: {
      contboxVue
    },
    data() {
      return {
        show: false,
        params: {
          province: true,
          city: true,
          area: true
        },
        city: null,
        keyword: '阳澄湖大螃蟹',
        list: [{
          image: '/static/sx.png'
        }, {
          image: '/static/sx2.png'
        }],
        grid: [{
          image: '/static/团购.png',
          text: '团购'
        }, {
          image: '/static/秒杀.png',
          text: '秒杀'
        }, {
          image: '/static/精选.png',
          text: '精选'
        }, {
          image: '/static/领劵中心.png',
          text: '领劵'
        }, {
          image: '/static/分享.png',
          text: '分享'
        }],
        hawu: [{
          imageurl: '/static/bun.png',
          title1: '江苏无锡香菇猪肉包',
          title2: '猪肉肥美',
          title3: '鲜甜软嫩',
          title4: '多汁美味',
          title5: '多汁香嫩',
          title6: '8.79',
          title7: '笼',
          title9: '劵',
          title8: '减10元'
        }, {
          imageurl: '/static/broccoli.png',
          title1: '浙江临海西兰花',
          title2: '基地自供',
          title3: '绿色培植',
          title4: '新鲜采摘',
          title5: '绿色新鲜',
          title6: '4.79',
          title7: '斤'
        }, {
          imageurl: '/static/tomato.png',
          title1: '云南高山大西红柿',
          title2: '鲜嫩多汁',
          title3: '软甜爽口',
          title4: '入口美味',
          title5: '美味多汁',
          title6: '2.44',
          title7: '斤'
        }, {
          imageurl: '/static/potato.png',
          title1: '宁夏西吉县马铃薯',
          title2: '基地自供',
          title3: '绿色培植',
          title4: '新鲜采摘',
          title5: '绿色新鲜',
          title6: '3.21',
          title7: '斤'
        }]
      }
    },
    methods: {
      getCity(e) {
        console.log(this.city);
        this.city = e.province.label + e.city.label + e.area.label
      }

    }
  }
</script>

<style lang="scss" scoped>
  .box {
    background-color: #70ca98;
    height: 350rpx;
    border-radius: 0rpx 0rpx 35rpx 35rpx;

    .box1 {

      .boox {
        // padding-top: 55rpx;
        font-size: 30rpx;
        display: flex;
        padding-left: 2vh;

        image {
          width: 5vw;
          height: 3vh;
        }

        .address {
          color: #fff;

          input::-webkit-input-placeholder {
            /* placeholder颜色 */
            color: #fff;
            /* placeholder字体大小 */
            font-size: 12px;
          }
        }
      }

    }

    .content {
      width: 95%;
      margin: 0 auto;
      position: relative;
      display: flex;
      justify-content: center;
      padding-top: 20rpx;

      .cont {
        width: 90%;
        margin: 0 auto;
        position: absolute;
        top: 30rpx;


        //search
        .search {
          width: 100%;
          position: relative;
          height: 100rpx;

          .btn {
            background-color: #49ba7c;
            color: white;
            font-size: 25rpx;
            width: 150rpx;
            height: 55rpx;
            line-height: 55rpx;
            border-radius: 30rpx;
            position: absolute;
            top: 6.5rpx;
            right: 5rpx;
          }
        }

        //swiper
        .swiper {
          margin-top: 10rpx;
        }
      }
    }

    .cont2 {
      padding-top: 400rpx;
      width: 100%;

      .cont2-box {
        width: 95%;
        margin: 0 auto;
        background-color: #F8F8F8;

        .cont2-box2 {
          width: 95%;
          margin: 0 auto;

          .grid {
            background-color: #fff;

            .u-grid {
              border-radius: 10rpx;
            }

            img {
              width: 40rpx;
              height: 40rpx;
            }

            .grid-text {
              font-size: 28rpx;
              margin-top: 4rpx;
              color: $u-type-info;
            }
          }

          .spikes {
            background-color: #fff;
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;

            .l-title {
              width: 48%;
              height: 240rpx;
              background: linear-gradient(#fee9d1, #fff);
              padding: 10rpx 0 0 10rpx;

              .l-text {
                font-size: 30rpx;
                font-weight: bold;
                letter-spacing: 2rpx;
                padding-top: 10rpx;

                text {
                  color: #e67e4a;
                }

              }

              img {
                padding: 10rpx;
                width: 120rpx;
                height: 110rpx;
              }

              .l-text2 {
                font-size: 20rpx;
                color: #cac3bc;
                padding-top: 10rpx;
              }
            }

            .r-title {
              width: 48%;
              background: linear-gradient(#fee6e9, #fff);
              padding: 10rpx 10rpx 0 10rpx;

              .r-box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .r-text {
                  font-size: 30rpx;
                  font-weight: bold;
                  letter-spacing: 2rpx;
                  padding-top: 10rpx;
                }

                .r-text3 {
                  padding-top: 10rpx;
                  font-size: 20rpx;

                  text {
                    color: #ff5500;
                  }
                }
              }

              .r-text2 {
                font-size: 20rpx;
                color: #cac3bc;
                padding-top: 10rpx;
              }

              img {
                padding: 10rpx;
                width: 120rpx;
                height: 110rpx;
              }
            }
          }

          // 推荐
          .recommend {
            margin: 20rpx 0;

            .title {
              font-size: 30rpx;
              font-weight: bold;
            }

            .jshw {
              padding-top: 20rpx;
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;

              .jshw-box {
                width: 48%;
                margin-bottom: 20rpx;
              }
            }
          }
        }
      }
    }
  }
</style>